<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>

<TITLE>SugarCRM SQL Editor</TITLE>
<META charset="utf-8"/>


<HEAD>

<link rel="stylesheet" href="../../skins/plugins/sql/codemirror/lib/codemirror.css"/>
<link rel="stylesheet" href="../../skins/plugins/sql/codemirror/addon/hint/show-hint.css"/>
<link rel="stylesheet" href="../../skins/plugins/sql/datatables/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="../../skins/plugins/sql/datatables/extensions/buttons/buttons.dataTables.min.css"/>

<link href="../../skins/plugins/font-awesome/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="../../skins/plugins/animate.css" rel="stylesheet">

<link rel="stylesheet" href="../../skins/plugins/layui/css/layui.css">
   <link rel="shortcut icon" href="../../skins/product/img/logo.png">


<style>
.CodeMirror {
    width: 100%;
    /*border: 1px solid black;*/
}
.layui-table[lay-data] {
   display: block !important;
}
</style>
    
</HEAD>


<BODY>

<fieldset class="layui-elem-field site-demo-button" style="margin-bottom: 0px;background-color: white;height: 30px;margin-inline-start: 0px;
    margin-inline-end: 0px;" >
   <h2 style="display: inline;display: inline;font-weight: bold;font-size: 20px;line-height: 30px;vertical-align: sub;padding-left: 10px">套牌车分析</h2>
   <div class="layui-btn-group" style="float: right">
      <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" onclick="run_sql()"><i class="fa fa-play"></i></button>
      <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="fa fa-pause"></i></button>
      <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="fa fa-save"></i></button>
      <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="fa fa-trash"></i></button>
      <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" id="toggleSQL" onclick="toggleSQL()"><i class="fa fa-angle-double-up"></i></button>
   </div>
</fieldset>
<form id="sql-form">
   <textarea id="code" name="code">
-- show tables;
-- DESCRIBE -tableName-;
select a.access,b.data from cdn_access_statistic a ,cdn_access_data b where a.access = b.access;
   </textarea>
</form>
<div class="layui-card" style="margin-top: 5px;">
   <div class="layui-card-body">
      <div class="layui-tab" style="height: 400px">
         <ul class="layui-tab-title">
            <li class="layui-this">运行结果</li>
            <li>运行日志</li>
            <li>运行历史</li>
         </ul>
         <div class="layui-tab-content">
            <div class="layui-tab-item " id="data-container" style="text-align: center"><table id="demo" lay-filter="userFilter" ></table></div>
            <div class="layui-tab-item layui-show" id="data-error" style="text-align: center">暂无数据，请先运行任务!</div>
            <div class="layui-tab-item">暂无数据，请先运行任务!</div>
         </div>
      </div>
   </div>
</div>




<script src="../../skins/plugins/sql/js/jszip.min.js"></script>
<script src="../../skins/plugins/sql/codemirror/lib/codemirror.js"></script>
<script src="../../skins/plugins/sql/codemirror/addon/hint/show-hint.js"></script>
<script src="../../skins/plugins/sql/codemirror/addon/hint/sql-hint.js"></script>
<script src="../../skins/plugins/sql/codemirror/mode/sql/sql.js"></script>

<script src="../../skins/plugins/sql/js/jquery-2.2.0.min.js"></script>
<script src="../../skins/plugins/sql/datatables/js/jquery.dataTables.min.js"></script>
<script src="../../skins/plugins/sql/datatables/extensions/buttons/dataTables.buttons.min.js"></script>
<script src="../../skins/plugins/sql/datatables/extensions/buttons/buttons.html5.min.js"></script>
<script src="../../skins/plugins/sql/datatables/extensions/buttons/buttons.flash.min.js"></script>

<script src="../../skins/plugins/layui/layui.all.js"></script>
<script>
   layui.use(['element', 'layer'], function(){
      var element = layui.element;
      var layer = layui.layer;

      //监听折叠
      element.on('collapse(test)', function(data){
         layer.msg('展开状态：'+ data.show);
      });
   });
var AUTOCOMPLETE_TABLES = {
    'hello': ['world', 'neighbor', 'there'],
    'reply': ['rumble', 'hellodley', 'hi_there']
}

function fake_post(url, data, callback){
    // This structure is not specific to DataTable and is just the structure my server is returning.
    var response = {
        'type': 'table',
        'header': ['id', 'name'],
        'columns': [{'title': 'ID'}, {'title': 'Name'}],
        'data': [
            ['1', 'Homer Simpson'],
            ['2', 'Bart Simpson'],
            ['3', 'Lisa Simpson'],
            ['4', 'Ned Flanders'],
            ['5', 'Planet Earth']
        ]
    }

    callback(response);
}
function toggleSQL(){
   $("#sql-form").toggle();
   var dom = document.getElementById("toggleSQL");
   $(dom).children("i").css("fa fa-angle-double-down");
   if($(dom).children("i").hasClass("fa-angle-double-down")){

      $(dom).children("i").removeClass("fa-angle-double-down").addClass("fa fa-angle-double-up");
   }else {
      $(dom).children("i").removeClass("fa-angle-double-up").addClass("fa fa-angle-double-down");
   }
}

   function run_sql(){
       $('#data-container').show();
       $('#data-error').removeClass("layui-show");
       var sql = window.editor.getValue();
       layui.use('table', function(){
           var table = layui.table;
           table.render({
               elem: '#demo'
               ,url: '/sql/runSql'
               ,where:{sql:sql}
               ,method:'post'
               ,page: true //开启分页
               ,cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
               ,height: 500
               ,cols: [[
                   { type:'numbers',align:'center', width:60,title:'序号'}
                   ,{field:'access',  title: '字段名称',align:'center',width:'18%'}
               ]],
               done:function (res,page,count) {
                   var myData=new Array();
                   myData = res.data.columndata;
                   table.init('userFilter',{//转换成静态表格
                       cols:[myData]
                       ,data:res.data.data
                       ,limit:10
                   });
                   fake_post("editor/run-sql", {'data': sql}, function(result){
                       // $("#data-container").html(htmlinfo);
                       toggleSQL();
                   });
               }
           });
       });
   }

window.onload = function() {

    window.editor = CodeMirror.fromTextArea(document.getElementById('code'), {
        mode: 'text/x-mysql',
        indentWithTabs: true,
        smartIndent: true,
        lineNumbers: true,
        matchBrackets : true,
        autofocus: true,
        extraKeys: {"Ctrl-Space": "autocomplete"}
    });

    window.editor.setSize('auto','auto');
  
  CodeMirror.commands.autocomplete = function(cm) {
    CodeMirror.showHint(cm, CodeMirror.hint.sql, {
        tables: AUTOCOMPLETE_TABLES
    });
  }
};
</script>



</BODY>
</HTML>
